<template>
    <div class="audio-player-container">
        <!-- 音频播放器 -->
        <div class="audio-player-card">
            <div class="audio-header">
                <h3 class="audio-title">录音</h3>
                <div class="audio-status" v-if="audioUrl">
                    <span class="status-indicator" :class="{ playing: isPlaying }"></span>
                    <span class="status-text">{{ isPlaying ? '正在播放' : '已暂停' }}</span>
                </div>
            </div>

            <audio
                    ref="audioPlayer"
                    :src="audioUrl"
                    @timeupdate="updateProgress"
                    @loadedmetadata="initAudio"
                    @ended="handleAudioEnd"
                    class="audio-element"
            ></audio>

            <!-- 播放控制 -->
            <div class="controls">
                <el-button
                        size="mini"
                        @click="togglePlay"
                        v-if="!isPlaying"
                        class="control-btn play-btn"
                ><i class="el-icon-video-play" style="margin-right: 5px"></i>播放
                </el-button>
                <el-button
                        size="mini"
                        @click="togglePlay"
                        v-if="isPlaying"
                        class="control-btn play-btn"
                ><i class="el-icon-video-pause" style="margin-right: 5px"></i>暂停
                </el-button>
                <span class="time-display">
          <div style="display: flex;align-items: center">
              {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
          </div>
                    <el-slider
                        v-model="currentTime"
                        :max="duration"
                        :step="0.1"
                        @change="seekTo"
                        class="progress-slider"
                    ></el-slider>
        </span>
                <el-button
                        icon="el-icon-plus"
                        size="mini"
                        @click="addMarker"
                        :disabled="!audioUrl"
                        class="control-btn add-marker-btn"
                >
                    添加标记
                </el-button>
            </div>
        </div>

        <!-- 标记点列表 -->
        <div class="markers-panel" v-if="markers.length > 0">
            <div class="markers-header">
                <i class="el-icon-service"></i>
                <h4 class="markers-title">标记点 ({{ markers.length }})</h4>
            </div>

            <div class="markers-list">
                <div  v-for="(marker, index) in markers"
                      :key="index"
                      class="marker-item">
                    <div class="marker-info">
                        <span class="marker-time-badge">{{ formatTime(marker.time) }}</span>
                        <el-input
                            v-model="marker.label"
                            placeholder="添加标记描述"
                            size="mini"
                            @blur="getBlurMarks(marker,index)"
                            class="marker-label"
                        ></el-input>
                    </div>
                    <div class="marker-actions">
                        <el-button
                            icon="el-icon-play"
                            size="mini"
                            @click="jumpToMarker(marker.time)"
                            class="marker-btn play-marker-btn"
                        >播放</el-button>
                        <el-button
                            icon="el-icon-delete"
                            size="mini"
                            type="danger"
                            @click="removeMarker(index)"
                            v-if="mode != 'yulan'"
                            class="marker-btn delete-marker-btn"
                        ></el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'AudioPlayerWithMarkers',
    props: {
        // 音频文件URL，可从上传成功后获取
        audioUrl: {
            type: String,
            default: ''
        },
        mode:{
            type:String,
            default:'sheji'
        }
    },
    data() {
        return {
            isPlaying: false,
            currentTime: 0,
            duration: 0,
            markers: [], // 标记点数组，每个元素包含时间和标签
            audioElement:null,
        }
    },
    methods: {
        // 初始化音频信息
        initAudio() {
            this.duration = this.$refs.audioPlayer.duration || 0;
            this.audioElement = this.$refs.audioPlayer; // 假设使用原生audio标签并绑定了ref="audio"
            this.audioElement.addEventListener('loadedmetadata', () => {
                this.$emit('durationChange', this.audioElement.duration);
            });
        },

        // 切换播放/暂停
        togglePlay() {
            if (!this.audioUrl) return;

            const audio = this.$refs.audioPlayer;
            if (this.isPlaying) {
                audio.pause();
            } else {
                audio.play();
            }
            this.isPlaying = !this.isPlaying;
        },

        // 更新播放进度
        updateProgress() {
            this.currentTime = this.$refs.audioPlayer.currentTime;
        },

        // 跳转到指定时间
        seekTo(time) {
            this.$refs.audioPlayer.currentTime = time;
        },

        // 音频播放结束
        handleAudioEnd() {
            this.isPlaying = false;
        },

        // 格式化时间（秒 -> MM:SS）
        formatTime(seconds) {
            if (isNaN(seconds)) return '00:00';

            const mins = Math.floor(seconds / 60);
            const secs = Math.floor(seconds % 60);
            return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
        },

        // 添加标记点
        addMarker() {
            console.log('???')
            if (!this.audioUrl) return;
            // 检查是否已在当前时间附近有标记
            const nearbyMarker = this.markers.some(marker =>
                Math.abs(marker.time - this.currentTime) < 1 // 1秒内视为同一位置
            );

            if (nearbyMarker) {
                this.$message.warning('当前位置附近已有标记点');
                return;
            }

            this.markers.push({
                time: this.currentTime,
                label: `标记 ${this.markers.length + 1}`
            });
            this.$emit('throwMarks',{
                time: this.currentTime,
                label: `标记 ${this.markers.length + 1}`
            })
            this.$message.success(`已添加标记点: ${this.formatTime(this.currentTime)}`);
        },

        // 跳转到标记点
        jumpToMarker(time) {
            this.currentTime = time;
            this.seekTo(time);

            // 如果未播放，则自动播放
            if (!this.isPlaying) {
                this.togglePlay();
            }
        },

        // 删除标记点
        removeMarker(index) {
            this.markers.splice(index, 1);
            this.$message.error('已删除标记点');
            this.$emit('deleteMarks',index)
        },

        getBlurMarks(mark,ind){
            this.$emit('blurMark',mark,ind)
        },
        setMarks(markArr){
            this.markers = [...markArr]
        },
        // 提供跳转方法
        seek(time) {
            if (this.audioElement) {
                this.audioElement.currentTime = time;
            }
        }
    }
}
</script>

<style scoped>
.audio-player-container {
    padding: 20px;
    max-width: 800px;

}

/* 播放器卡片样式 */
.audio-player-card {
    background: linear-gradient(135deg, #f5f7fa 0%, #e4eaf1 100%);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.audio-player-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.audio-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.audio-title {
    margin: 0;
    color: #333;
    font-size: 18px;
    font-weight: 600;
}

.audio-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ccc;
    transition: background-color 0.3s ease;
}

.status-indicator.playing {
    background-color: #409eff;
    animation: pulse 2s infinite;
}

.status-text {
    font-size: 14px;
    color: #666;
}

.audio-element {
    width: 100%;
    margin-bottom: 15px;
    outline: none;
}

/* 控制按钮样式 */
.controls {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 0;
}

.control-btn {
    transition: all 0.2s ease;
    border-radius: 20px;
    padding: 4px 12px;
}

.control-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.play-btn {
    background-color: #409eff;
    border-color: #409eff;
    color: #fff;
}


.add-marker-btn {
    background-color: #409eff;
    border-color: #409eff;
    color: #fff;
}

.time-display {
    min-width: 100px;
    text-align: center;
    font-size: 14px;
    color: #666;
    font-family: 'Courier New', monospace;
}

.progress-slider {
    flex: 1;
    margin: 0 10px;
}

/* 标记点面板样式 */
.markers-panel {
    background-color: #fff;
    border-radius: 12px;
    margin-top: 20px;
    padding: 15px 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.markers-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.marker-icon {
    color: #409eff;
    font-size: 18px;
}

.markers-title {
    margin: 0;
    color: #333;
    font-size: 16px;
    font-weight: 500;
}

.markers-list {
    border-top: 1px solid #f0f0f0;
}

.marker-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px dashed #f0f0f0;
    transition: background-color 0.2s ease;
}

.marker-item:last-child {
    border-bottom: none;
}

.marker-item:hover {
    background-color: #f9fafc;
}

.marker-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.marker-time-badge {
    background-color: #ecf5ff;
    color: #409eff;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    min-width: 60px;
    text-align: center;
}

.marker-label {
    flex: 1;
    max-width: 400px;
    transition: all 0.2s ease;
}

.marker-label:focus-within {
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.marker-actions {
    display: flex;
    gap: 8px;
}

.marker-btn {
    transition: all 0.2s ease;
    border-radius: 4px;
}

.marker-btn:hover {
    transform: translateY(-1px);
}

.play-marker-btn {
    background-color: #409eff;
    border-color: #409eff;
    color: #fff;
}

.delete-marker-btn {
    color: #f56c6c;
    border-color: #f56c6c;
    background-color: rgba(245, 108, 108, 0.1);
}

/* 动画效果 */
@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}
</style>
